<div class="container gray-background">
   <header class="title">
    <i class="back" routerLink="/mine/setting/profile"></i>
    <p>选择城市</p>
  </header>
  <div class="areaPicker" id="area-picker">
    <div class="top seed-underline">
      <div class="nav">
        <span [ngClass]="{active: nowArea == 'provin'}" class="provin" (click)="showProvin()">{{chooseProv? chooseProv.title: '请选择'}}</span>
        <span [ngClass]="{active: nowArea == 'city'}" class="city" *ngIf="ProvHascity" (click)="showCity()">{{chooseCity && chooseCity.title? chooseCity.title: '请选择'}}</span>
      </div>
    </div>
    <div class="wrap" [ngStyle]="{'height': wrapHeight }">
      <div class="pick" [ngStyle]="{'width': width, 'left': pageLeft, 'height': wrapHeight }">
        <div class="page">
          <p *ngFor="let prov of allArea; let i = index " [ngClass]="{'has-choose': chooseProv && prov['areaId'] == chooseProv['areaId']}"
            (click)="choosingProv(i)">
            {{prov.title}}
          </p>
        </div>
        <div class="page">
          <p  *ngFor="let city of allCity;let i =index" [ngClass]="{'has-choose': chooseCity && city['areaId'] == chooseCity['areaId']}"
            (click)="choosingCity(i)">{{city.title}}</p>
        </div>
      </div>
    </div>
  </div>
</div>
